<template>
  <div class="input">
    <input type="text" placeholder="搜索" @focus="onActive" v-model="value">
    <span :class="{'--active':cancel}" @click="hideCancel">取消</span>
  </div>
</template>

<script lang="ts">

  import Vue from 'vue'
  import Component from 'vue-class-component'
  import {Prop, Watch} from "vue-property-decorator";
  import {recommendListInterface} from "../../interfaces/recommendListInterface";
  @Component()
  export default class Input extends Vue {
    @Prop({required: true, type: Array}) songLists: recommendListInterface[];

      private cancel=false
      private value=null

      private onActive(){
          this.cancel=true
      }

      private hideCancel(){
          this.cancel=false
          this.value=null
      }

      get searchSongLists(){
        if(this.value){
          return this.songLists.filter((songList)=>{
            return Object.keys(songList).some((key)=>{
              return String(songList[key]).toLocaleLowerCase().indexOf(this.value)!=-1
            })
          })
        }
        return []
      }

    @Watch('value', { immediate: true, deep: true })

    private passData(val: string, oldVal: string) {
        this.$emit('searchData',this.searchSongLists)
    }



  }
</script>

<style lang="scss">
  @include component(input){
    width: 100%;
    margin: 0 auto;
    @include loop-breakpoints(){
      height: #{ $gridel-row-height * 3 + rem };
    }
    background: $color-fff;

    &:before{
      position: absolute;
      left: 15px;
      top: 16px;
      width:16px;
      height: 16px;
      content: "";
      background-image: url("../../assets/imgs/icons/search-input.svg");
      background-size: cover;

    }

    input{
      display: inline-block;
      width: 100%;
      height: 100%;
      border: none;
      padding-left: 1.5rem;
      outline: none;
    }

    span{
      display: inline-block;
      position: absolute;
      right: 0;
      top: 0;
      width: 60px;
      height: 100%;
      background:#D9D9D9;
      line-height: 300%;
      text-align: center;
      transition: all 0.6s;
      transform: translateX(60px);
      @include option(active){
        transform: translateX(0);
      }

    }

  }
</style>
